<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div里的div设置外边距（margin）没有效果 */
        /* 给父元素（login_box)添加overflow属性 */
        /* 解决方案4：
           为父元素添加border
             border: 1px solid; */
        * {
            margin: 0;
            padding: 0;
        }

        .div1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 40px;
            overflow: hidden;
            position: relative;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin-top: 20px;
        }
        .div3{
            width: 300px;
            height: 300px;
            background-color: black;
            margin: 100px auto;
            /* padding: 20px; */
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <div class="div3"></div>
    <script>
        // 获取元素位置用offset
        // 获取元素大小有client
        // 获取元素滚动距离用scroll
        let div1 = document.querySelector('.div1')
        let div2 = document.querySelector('.div2')
        let div3 = document.querySelector('.div3')
        // 1 可以获取元素的偏移 位置 返回不带单位的数值
        console.log(div1.offsetTop);
        console.log(div1.offsetLeft);

        // 2 如果有父元素，或者父元素没有定位 则以body为准 如果父元素有定位则以父元素为准
        console.log(div2.offsetLeft);
        console.log(div2.offsetTop);

        // 3 可以获取元素的宽高 包含内边距+边框
        console.log(div3.offsetWidth);
        console.log(div3.offsetHeight);

        // 4 返回带有定位的父亲 否则返回的是body
        console.log(div2.offsetParent);

    </script>
</body>

</html>